<template>
  <div>
    <div v-show="!nowMenuInfo?.key">你未添加自定义菜单，点击左侧添加菜单为公众号创建菜单栏。</div>
    <MenuForm :button="nowMenuInfo" v-show="nowMenuInfo?.key" v-bind="$attrs"></MenuForm>
  </div>
</template>

<script setup lang="ts">
import { buttons } from "@/views/app/wechat/menus/interface/index";
import { watch, ref } from "vue";
import MenuForm from "./form.vue";

interface Props {
  params: {
    menu: { button: buttons[] };
    key: string;
  };
}

const props = withDefaults(defineProps<Props>(), {
  params() {
    return {
      menu: {
        button: []
      },
      key: ""
    };
  }
});

// 找出对应的菜单
const findMenu = (list: buttons[], nowIndex: string | undefined): buttons | undefined => {
  for (let i = 0; i < list.length; i++) {
    if (list[i].key === nowIndex) {
      return list[i];
    } else if (list[i].sub_button && list[i].sub_button.length !== 0) {
      for (let j = 0; j < list[i].sub_button.length; j++) {
        if (list[i].sub_button[j].key === nowIndex) {
          return list[i].sub_button[j];
        }
      }
    }
  }
  return undefined;
};

// 当前的菜单信息
const nowMenuInfo = ref<buttons>();

watch(
  () => props.params,
  () => {
    const item = findMenu(props.params.menu.button, props.params.key);
    nowMenuInfo.value = item;
  },
  { deep: true }
);

watch(
  () => nowMenuInfo.value,
  () => {
    // console.log(nowMenuInfo.value);
  },
  { deep: true }
);
</script>

<style></style>
